<template>
  <div class="page">
    <br />
    <div class="block">
      <el-avatar :size="100" :src="user.avatar"></el-avatar>
      <div>{{ user.username }}</div>
    </div>
    <div class="splitline">
      <span> <el-link type="primary" href="/blogs">主页</el-link></span>
      <el-divider direction="vertical"></el-divider>
      <span> <el-link type="success" href="/blog/add">发表博客</el-link></span>
      <el-divider direction="vertical"></el-divider>
      <span>
        <el-link type="warning" @click="logout" v-show="isLogin"
          >退出</el-link
        ></span
      >

      <span>
        <el-link type="warning" href="/login" v-show="!isLogin"
          >登录</el-link
        ></span
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  components: {},
  data() {
    return {
      user: {
        username: "QIU",
        avatar:
          "http://img.zhaogexing.com/touxiang/140705/1-140F5134336-50.jpg",
      },
      isLogin: false,
    };
  },
  methods: {
    logout() {
      let that = this;
      //url,config
      //请求后台，消除session
      this.$axios
        .get("/logout", {
          headers: {
            //获取storage方法1
            Authorization: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          //移除浏览器storage,并路由到登录界面
          that.$store.commit("REMOVE_INFO");
          that.$router.push("/login");
        });
    },
  },
  created() {
    //初始化数据
    if (this.$store.getters.getUser.username) {
      //获取storage方法2
      this.user.username = this.$store.getters.getUser.username;
      this.user.avatar = this.$store.getters.getUser.avatar;
      this.isLogin = true;
    }
  },
};
</script>

<style>
.page {
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}
.splitline {
  margin: 10px;
}
</style>
